/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
    TouchableOpacity,
    Image,
    ListView,
    StyleSheet,
    Text,
    View,
    } = React;

var mockData = [
    {
        title : "世界钢协：全球8月粗钢产量同比下降3%至1.32亿吨 中国减产3.5%",
        sourceSiteName : "钢铁行业网",
        source : "http://www.opsteel.cn/news/2015-09/1FD8F8EF52B97FC7E050080A7DC916E3.html",
        date : "2015.09.20",
        imgs : [
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg"
        ],
        type : "oneSmallImg"
    },
    {
        title : "世界钢协：全球8月粗钢产量同比下降3%至1.32亿吨 中国减产3.5%",
        sourceSiteName : "钢铁行业网",
        source : "http://www.opsteel.cn/news/2015-09/1FD8F8EF52B97FC7E050080A7DC916E3.html",
        date : "2015.09.20",
        imgs : [
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg"
        ],
        type : "oneSmallImg"
    },
    {
        title : "世界钢协：全球8月粗钢产量同比下降3%至1.32亿吨 中国减产3.5%",
        sourceSiteName : "钢铁行业网",
        source : "http://www.opsteel.cn/news/2015-09/1FD8F8EF52B97FC7E050080A7DC916E3.html",
        date : "2015.09.20",
        imgs : [
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg"
        ],
        type : "oneSmallImg"
    },
    {
        title : "世界钢协：全球8月粗钢产量同比下降3%至1.32亿吨 中国减产3.5%",
        sourceSiteName : "钢铁行业网",
        source : "http://www.opsteel.cn/news/2015-09/1FD8F8EF52B97FC7E050080A7DC916E3.html",
        date : "2015.09.20",
        imgs : [
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg",
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg",
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg"
        ],
        type : "threeSmallImg"
    },
    {
        title : "世界钢协：全球8月粗钢产量同比下降3%至1.32亿吨 中国减产3.5%",
        sourceSiteName : "钢铁行业网",
        source : "http://www.opsteel.cn/news/2015-09/1FD8F8EF52B97FC7E050080A7DC916E3.html",
        date : "2015.09.20",
        imgs : [
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg"
        ],
        type : "oneSmallImg"
    },
    {
        title : "世界钢协：全球8月粗钢产量同比下降3%至1.32亿吨 中国减产3.5%",
        sourceSiteName : "钢铁行业网",
        source : "http://www.opsteel.cn/news/2015-09/1FD8F8EF52B97FC7E050080A7DC916E3.html",
        date : "2015.09.20",
        imgs : [
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg"
        ],
        type : "oneSmallImg"
    },
    {
        title : "世界钢协：全球8月粗钢产量同比下降3%至1.32亿吨 中国减产3.5%",
        sourceSiteName : "钢铁行业网",
        source : "http://www.opsteel.cn/news/2015-09/1FD8F8EF52B97FC7E050080A7DC916E3.html",
        date : "2015.09.20",
        imgs : [
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg"
        ],
        type : "oneSmallImg"
    },
    {
        title : "世界钢协：全球8月粗钢产量同比下降3%至1.32亿吨 中国减产3.5%",
        sourceSiteName : "钢铁行业网",
        source : "http://www.opsteel.cn/news/2015-09/1FD8F8EF52B97FC7E050080A7DC916E3.html",
        date : "2015.09.20",
        imgs : [
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg"
        ],
        type : "oneSmallImg"
    },
    {
        title : "世界钢协：全球8月粗钢产量同比下降3%至1.32亿吨 中国减产3.5%",
        sourceSiteName : "钢铁行业网",
        source : "http://www.opsteel.cn/news/2015-09/1FD8F8EF52B97FC7E050080A7DC916E3.html",
        date : "2015.09.20",
        imgs : [
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg"
        ],
        type : "oneSmallImg"
    },
    {
        title : "世界钢协：全球8月粗钢产量同比下降3%至1.32亿吨 中国减产3.5%",
        sourceSiteName : "钢铁行业网",
        source : "http://www.opsteel.cn/news/2015-09/1FD8F8EF52B97FC7E050080A7DC916E3.html",
        date : "2015.09.20",
        imgs : [
            "http://img.china.alibaba.com/img/ibank/2013/586/305/984503685_1146405675.64x64.jpg"
        ],
        type : "oneSmallImg"
    }
];

var RefreshableListView = require('react-native-refreshable-listview');
var TabBanner = require( './TabBanner' );
var IS_BANNER_RENDERED = false;

/**
 * @property navigator
 * @property reqUrl
 * @property keyword
 */
var NewsList = React.createClass({
    getInitialState: function() {
        return {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            }),
            initSize : 0,
            loaded: false,
            withBanner : 'withbanner' == this.props.type
        };
    },

    componentDidMount: function() {
        this.fetchData();
        // for debug, otherwise use fetchData() above
        /*this.setState({
         dataSource: this.state.dataSource.cloneWithRows( mockData ),
         initSize : mockData.length,
         loaded: true
         });*/
    },

    fetchData: function( cb ) {
        //alert('fetchData');
        fetch( this.props.reqUrl )
            .then((response) => response.json())
            .then((responseData) => {
                if ( this.state.withBanner ) {
                    IS_BANNER_RENDERED = false;
                    // insert data to the front
                }

                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData),
                    loaded: true
                });
                cb && cb();
            })
            .done();
    },

    loadData : function ( cb ) {
        //alert( 'loadData' );
        this.fetchData( cb );
    },

    render: function() {
        if (!this.state.loaded) {
            return this.renderLoadingView();
        }

        return (
            <RefreshableListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                style={styles.listView}
                automaticallyAdjustContentInsets={false}
                loadData={this.loadData}
                refreshDescription="Refreshing articles"
                minPulldownDistance={50}
            />
        );
    },

    renderLoadingView: function() {
        return (
            <View style={styles.container}>
                <Text>
                    Loading movies...
                </Text>
            </View>
        );
    },

    itemPress : function ( sourceUrl ) {
        this.props.navigator.push({ id : 'detail', sourceUrl : sourceUrl });
    },

    renderBanner : function () {
        return (
            <TabBanner></TabBanner>
        )
    },

    renderRow: function(row) {
        if ( this.state.withBanner && !IS_BANNER_RENDERED ) {
            IS_BANNER_RENDERED = true;
            return (
                <TabBanner></TabBanner>
            );
        }
        else
            return (
                <TouchableOpacity
                    onPress={()=>{this.itemPress(row.source);}}>
                    <View style={styles.container}>
                        <View style={styles.leftContainer}>
                            <View style={styles.titleView}>
                                <Text>{row.title}</Text>
                            </View>
                            <View style={styles.btmView}>
                                <Text style={styles.srcName}>{row.sourceSiteName}</Text>
                                <Text style={styles.date}>{row.date}</Text>
                            </View>
                        </View>
                        <Image
                            source={{uri: row.imgs[0]}}
                            style={styles.img}
                        />
                    </View>
                </TouchableOpacity>
            );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        margin : 10,
        marginBottom : 0,
        paddingBottom : 10,
        borderBottomWidth : 1,
        borderBottomColor : '#ddd',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        fontFamily : 'Heiti SC'
    },
    leftContainer : {
        flex: 1,
        width : 264
    },
    titleView : {
        flex : 1,
        height : 36,
        lineHeight : 15
    },
    btmView : {
        flex : 1,
        marginTop : 10,
        flexDirection : 'row',
        justifyContent : 'flex-start'
    },
    srcName : {
        fontSize : 12,
        color : 'blue'
    },
    date : {
        fontSize : 12,
        color : '#ddd',
        paddingLeft : 2
    },
    img : {
        width : 90,
        height : 65
    },
    listView: {
        flex : 1,
        paddingBottom : 100
    }
});

module.exports = NewsList;